<template>
	<div class="singleDetail-box">
		<web-header :title="currentCostCategory + '计算'"></web-header>
		<div class="total-box">
			<div class="item-cell">
				<p class="item-title">日期:</p>
				<p class="item-value">{{ currentCostInfo?.startDate + " 至 " + currentCostInfo?.endDate }}</p>
			</div>
			<div class="item-cell">
				<p class="item-title">总费用:</p>
				<p class="item-value">{{ currentCostInfo?.totalMoney }}</p>
			</div>
			<div class="item-cell">
				<p class="item-title">总天数:</p>
				<p class="item-value">{{ currentCostInfo?.days }}</p>
			</div>
		</div>
		<div class="detail-box">
			<div class="detail-title">明细</div>
			<div class="section-box" v-for="item in currentCostInfo?.childrens" :key="item.id">
				<div class="cell-box">
					<div class="item-cell item-date">
						<p class="item-title">日期:</p>
						<p class="item-value">{{ item.startDate + " 至 " + item.endDate }}</p>
					</div>
					<div class="item-cell item-parts">
						<p class="item-title">人数:</p>
						<p class="item-value">{{ item.payRooms.reduce((sum, ele) => sum + ele.costRoomConfig.parts, 0) }}</p>
					</div>
					<div class="item-cell item-parts">
						<p class="item-title">天数:</p>
						<p class="item-value">{{ item.days }}</p>
					</div>
					<div class="item-cell">
						<p class="item-title">总费用:</p>
						<p class="item-value">{{ item.totalMoney }}</p>
					</div>
					<div class="item-cell">
						<p class="item-title">人均费用:</p>
						<p class="item-value">{{ item.mean }}</p>
					</div>
					<div class="item-cell item-addUp">
						<p class="item-title">支付房间:</p>
						<p class="item-value">{{ item.payRoomsText }}</p>
					</div>
					<div class="item-cell item-desc" v-if="item.desc">
						<p class="item-title">备注:</p>
						<p class="item-value value-desc">{{ item.desc }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="detail-box">
			<div class="detail-title title-addUp">合计</div>
			<div class="section-box">
				<div class="cell-box">
					<div class="item-cell item-addUp" v-for="item in addUps" :key="item.roomType">
						<p class="item-title">{{ item.roomType + ":" }}</p>
						<p class="item-value">{{ item.totalMoneyDes }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { storeToRefs } from "pinia";
import { CostCalculateStore } from "@/store/costCalculate";
import dayjs from "dayjs";
import { CostConfig, CostInfoChildren, CostAddUpInfo, CostRoomConfig } from "@/interface/costCalculate";
import { log } from "console";

const { proxy } = useCurrentInstance();

const costCalculateStore = CostCalculateStore();
let { costConfigs, currentCostCategory, currentCostInfo } = storeToRefs(costCalculateStore);
const costConfig = ref<CostConfig>();

const addUps = ref<CostAddUpInfo[]>([]);

//明细
const calculateDetail = () => {
	if (!currentCostInfo.value) {
		return;
	}
	let totalDays = dayjs(currentCostInfo.value.endDate).diff(currentCostInfo.value.startDate, "day") + 1;
	let totalMoney = Number(currentCostInfo.value.totalMoney);
	currentCostInfo.value.days = totalDays;
	currentCostInfo.value.childrens.forEach((ele: CostInfoChildren) => {
		let startDate = dayjs(ele.startDate);
		let endDate = dayjs(ele.endDate);
		let days = endDate.diff(startDate, "day") + 1;
		let money: number = (days / totalDays) * totalMoney;
		money = Math.round(money * 100) / 100; //最多保留2为小数
		let parts = ele.payRooms.reduce((sum, ele) => sum + ele.costRoomConfig.parts, 0);
		let mean = money / parts;
		mean = Math.round(mean * 100) / 100; //最多保留2为小数
		ele.days = days;
		ele.totalMoney = money.toString();
		ele.mean = mean;
		totalMoney -= money;
		totalDays -= days;
	});
};

//合计
const calculateAddUp = () => {
	if (!costConfig.value || !currentCostInfo.value) {
		return;
	}
	costConfig.value.roomConfigs.forEach((roomConfig: CostRoomConfig) => {
		if (roomConfig.parts > 0) {
			let totalMoney = 0;
			let totalMoneyDes = "";
			//1. 计算每一份的合计费用
			currentCostInfo.value?.childrens.forEach((children: CostInfoChildren, i: number) => {
				let index = children.payRooms.findIndex(room => room.costRoomConfig.roomType == roomConfig.roomType);
				let mean = 0;
				if (index != -1) {
					mean = children.mean;
					totalMoney += mean;
				}
				if (i == 0) {
					totalMoneyDes = `${mean}`;
				} else {
					totalMoneyDes = totalMoneyDes + ` + ${mean}`;
				}
			});
			//2.计算每个房间的合计费用（有的房间可能需要支付多份）
			totalMoney = totalMoney * roomConfig.parts;
			totalMoney = Math.round(totalMoney * 100) / 100;

			if (roomConfig.parts != 1) {
				totalMoneyDes = `( ${totalMoneyDes} ) x ${roomConfig.parts}` + ` = ${totalMoney}`;
			} else {
				totalMoneyDes = `${totalMoneyDes}` + ` = ${totalMoney}`;
			}
			if (totalMoney > 0) {
				addUps.value.push({
					roomType: roomConfig.roomType,
					totalMoney: totalMoney,
					totalMoneyDes: totalMoneyDes
				});
			}
		}
	});
};

onMounted(() => {
	costConfig.value = costConfigs.value.find((ele: CostConfig) => ele.costCategory == currentCostCategory.value);
	calculateDetail();
	calculateAddUp();
});
</script>

<style lang="scss" scoped>
.nav-bar {
	height: 0.5rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	font-size: 0.2rem;
	border-bottom: 1px solid #e0e0e0;
}

.total-box {
	background-color: #fff;
	.item-cell {
		display: flex;
		padding: 0.16rem;
		.item-title {
			font-size: 0.14rem;
			color: #666;
			width: 0.7rem;
		}
		.item-value {
			font-size: 0.16rem;
			color: #333;
		}
		&:nth-child(n + 2) {
			border-top: 1px solid #e0e0e0;
		}
	}
	.item-date {
		.item-value {
			color: #3369fe;
		}
	}
}

.detail-box {
	margin-top: 0.2rem;
	// padding: 0.2rem 0;
	.detail-title {
		font-size: 0.15rem;
		color: #333;
		padding-left: 0.1rem;
	}
	.title-addUp {
		color: #dd1717;
		font-size: 0.2rem;
	}
	.section-box {
		margin-top: 0.1rem;
		border-radius: 0.04rem;
		background-color: #fff;
		.cell-box {
			display: flex;
			flex-wrap: wrap;
			padding: 0.1rem 0;
			.item-cell {
				width: 40%;
				display: flex;
				flex-wrap: wrap;
				padding: 0.1rem 0.16rem;
				align-items: center;
				.item-title {
					font-size: 0.14rem;
					color: #666;
					width: 0.7rem;
				}
				.item-value {
					font-size: 0.16rem;
					color: #333;
				}
				.value-desc {
					font-size: 0.14rem;
					color: #999;
				}
			}
			.item-date,
			.item-addUp,
			.item-desc {
				width: 100%;
			}
			.item-date {
				.item-value {
					color: #3369fe;
				}
			}
		}
	}
}

.footer-wrap {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0.1rem;
	margin-top: 0.15rem;
	color: #3369fe;
}
</style>
